<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Recommendation System</title>
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon16.png') }}">
    <link rel="icon" type="image/x-icon" sizes="32x32" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header class="mt-4 mb-5">
            <h1 class="text-center">Item-Based Collaborative Filtering</h1>
            <h3 class="text-center text-muted">Movie Recommendation System</h3>
        </header>

        <!-- Flashed messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="row">
            <!-- Recommendation Form -->
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0">Get Recommendations</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('recommend') }}" method="post">
                            <div class="form-group">
                                <label for="user_id">User ID:</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="user_id" name="user_id" min="1" max="{{ model_params.n_users }}" value="1" required>
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" id="randomUserBtn">Random</button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">Enter a user ID between 1 and {{ model_params.n_users }}</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="num_recommendations">Number of Recommendations:</label>
                                <input type="number" class="form-control" id="num_recommendations" name="num_recommendations" min="1" max="50" value="10">
                            </div>
                            
                            <div class="form-group">
                                <label for="similarity_method">Similarity Method:</label>
                                <select class="form-control" id="similarity_method" name="similarity_method">
                                    {% for method in similarity_methods %}
                                        <option value="{{ method }}" {% if model_params.similarity_method == method %}selected{% endif %}>{{ method|title }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="prediction_method">Prediction Method:</label>
                                <select class="form-control" id="prediction_method" name="prediction_method">
                                    {% for method in prediction_methods %}
                                        <option value="{{ method }}" {% if model_params.prediction_method == method %}selected{% endif %}>{{ method|replace('_', ' ')|title }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="k">Number of Similar Items (k):</label>
                                <input type="number" class="form-control" id="k" name="k" min="1" max="100" value="{{ model_params.k }}">
                            </div>
                            
                            <button type="submit" class="btn btn-primary btn-block">Get Recommendations</button>
                        </form>
                    </div>
                    <div class="card-footer text-muted">
                        <small>Changing model parameters will retrain the model, which may take a moment.</small>
                    </div>
                </div>

                <!-- Find Similar Items Form -->
                <div class="card shadow mt-4">
                    <div class="card-header bg-success text-white">
                        <h4 class="mb-0">Find Similar Items</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('similar_items') }}" method="post">
                            <div class="form-group">
                                <label for="item_id">Item ID (Movie):</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="item_id" name="item_id" min="1" max="{{ model_params.n_items }}" value="1" required>
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" id="randomItemBtn">Random</button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">Enter an item ID between 1 and {{ model_params.n_items }}</small>
                            </div>
                            
                            <div class="form-group">
                                <label for="num_similar">Number of Similar Items:</label>
                                <input type="number" class="form-control" id="num_similar" name="num_similar" min="1" max="50" value="10">
                            </div>
                            
                            <button type="submit" class="btn btn-success btn-block">Find Similar Items</button>
                        </form>
                    </div>
                </div>

                <!-- More Like This Form -->
                <div class="card shadow mt-4">
                    <div class="card-header bg-info text-white">
                        <h4 class="mb-0">"More Like This" Recommendations</h4>
                    </div>
                    <div class="card-body">
                        <p>Find items similar to a specific item that a user might enjoy.</p>
                        <form action="{{ url_for('more_like_this') }}" method="post">
                            <div class="form-group">
                                <label for="more_user_id">User ID:</label>
                                <input type="number" class="form-control" id="more_user_id" name="user_id" min="1" max="{{ model_params.n_users }}" value="1" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="more_item_id">Item ID (Movie):</label>
                                <input type="number" class="form-control" id="more_item_id" name="item_id" min="1" max="{{ model_params.n_items }}" value="1" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="more_num_recommendations">Number of Recommendations:</label>
                                <input type="number" class="form-control" id="more_num_recommendations" name="num_recommendations" min="1" max="50" value="10">
                            </div>
                            
                            <button type="submit" class="btn btn-info btn-block">Get "More Like This" Recommendations</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Dataset and Model Information -->
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-secondary text-white">
                        <h4 class="mb-0">Dataset Information</h4>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <tbody>
                                <tr>
                                    <th>Number of Users:</th>
                                    <td>{{ dataset_stats.n_users }}</td>
                                </tr>
                                <tr>
                                    <th>Number of Movies:</th>
                                    <td>{{ dataset_stats.n_items }}</td>
                                </tr>
                                <tr>
                                    <th>Total Ratings:</th>
                                    <td>{{ dataset_stats.n_ratings }}</td>
                                </tr>
                                <tr>
                                    <th>Rating Density:</th>
                                    <td>{{ "%.4f"|format(dataset_stats.rating_density) }} ({{ "%.2f"|format(dataset_stats.rating_density * 100) }}%)</td>
                                </tr>
                                <tr>
                                    <th>Average Rating:</th>
                                    <td>{{ "%.2f"|format(dataset_stats.rating_mean) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card shadow mt-4">
                    <div class="card-header bg-secondary text-white">
                        <h4 class="mb-0">Model Configuration</h4>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <tbody>
                                <tr>
                                    <th>Similarity Method:</th>
                                    <td>{{ model_params.similarity_method|title }}</td>
                                </tr>
                                <tr>
                                    <th>Prediction Method:</th>
                                    <td>{{ model_params.prediction_method|replace('_', ' ')|title }}</td>
                                </tr>
                                <tr>
                                    <th>Number of Similar Items (k):</th>
                                    <td>{{ model_params.k }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Popular Movies -->
                <div class="card shadow mt-4">
                    <div class="card-header bg-warning text-white">
                        <h4 class="mb-0">Popular Movies</h4>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3" id="popularMoviesLoading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Loading popular movies...</p>
                        </div>
                        <div id="popularMoviesContent" style="display: none;">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Movie Title</th>
                                        <th>Average Rating</th>
                                        <th>Ratings Count</th>
                                    </tr>
                                </thead>
                                <tbody id="popularMoviesTable">
                                    <!-- Populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Evaluation Button -->
                <div class="card shadow mt-4">
                    <div class="card-header bg-danger text-white">
                        <h4 class="mb-0">Model Evaluation</h4>
                    </div>
                    <div class="card-body">
                        <p>Evaluate the current model configuration on a test dataset.</p>
                        <form action="{{ url_for('evaluate_model') }}" method="post">
                            <input type="hidden" name="similarity_method" value="{{ model_params.similarity_method }}">
                            <input type="hidden" name="prediction_method" value="{{ model_params.prediction_method }}">
                            <input type="hidden" name="k" value="{{ model_params.k }}">
                            <button type="submit" class="btn btn-danger btn-block">Evaluate Model</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <footer class="mt-5 mb-3 text-center text-muted">
            <p>&copy; 2025 Item-Based Collaborative Filtering Project</p>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            // Get random user ID
            $('#randomUserBtn').click(function() {
                const maxUserId = {{ model_params.n_users }};
                const randomUserId = Math.floor(Math.random() * maxUserId) + 1;
                $('#user_id').val(randomUserId);
            });

            // Get random item ID
            $('#randomItemBtn').click(function() {
                const maxItemId = {{ model_params.n_items }};
                const randomItemId = Math.floor(Math.random() * maxItemId) + 1;
                $('#item_id').val(randomItemId);
            });

            // Load popular movies
            $.ajax({
                url: "{{ url_for('get_popular_movies') }}",
                type: "GET",
                success: function(response) {
                    $('#popularMoviesLoading').hide();
                    $('#popularMoviesContent').show();
                    
                    const movies = response.popular_movies;
                    let tableContent = '';
                    
                    movies.forEach(function(movie) {
                        tableContent += `
                            <tr>
                                <td>${movie.movie_title}</td>
                                <td>${movie.avg_rating.toFixed(2)}</td>
                                <td>${movie.rating_count}</td>
                            </tr>
                        `;
                    });
                    
                    $('#popularMoviesTable').html(tableContent);
                },
                error: function(error) {
                    $('#popularMoviesLoading').html(`
                        <div class="alert alert-danger">
                            Failed to load popular movies.
                        </div>
                    `);
                }
            });
        });
    </script>
</body>
</html>